使用 VSCODE DEBUG 對 VUE + VITE 專案進行偵錯

小弟我沒有把握能把程式邏輯或內容撰寫完全正確，因此偵錯功能相當重要，偵錯個人認為至少有下列兩項優點

1. 當程式執行結果不如預期，利用逐步或設立中斷點來觀察程式輸出內容。
2. 當程式不能順利運行時，可利用上述方式與終端機(Terminal)內容來進行處理。

上述也是直譯式語言最大優點，不用完整程式碼經過編譯後才能執行偵錯，那下列就來說明如何在 VSCODE 設定偵錯吧~~

新增偵錯文件

• 在 VSCODE 左方工具列中選擇 Run and Debug (Ctrl + Shift + D)

• 點選 Run and Debug

  
  

修改偵錯文件內容

• url: 調整了 Port ，這部分需要對應 Vue 使用 Port
• webRoot: 網頁根目錄
• sourceMapPathOverrides: 相關程式轉譯路徑連結
• sourceMaps: 程式轉譯連結
  內容如下

  // .vscode/launch.json
  {
  // Use IntelliSense to learn about possible attributes.
  // Hover to view descriptions of existing attributes.
  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "vuejs: chrome",
      "url": "http://localhost:5555",
      "webRoot": "${workspaceFolder}/src",
      "sourceMapPathOverrides": {
        "webpack:///src/*": "${webRoot}/*"
      },
      "sourceMaps": true,
    }
  ]
  }